<template>
  <div class="about">
    <h1>动态插槽</h1>
    <button @click="toggle">切换动态插槽名称</button>
    <my-test2 :title="val">
      <template #[curDeynamicSlotName]>我是{{ curDeynamicSlotName }}插槽</template>
    </my-test2>

    <h1>具名插槽</h1>
    <my-name-comp>
      <template #header>
        <div class="header-children">
          我是header插槽
        </div>
      </template>
      <div class="container-children">我是内容插槽</div>
      <template #footer>
        <div class="header-children">
          我是footer插槽
        </div>
      </template>
    </my-name-comp>

    <h1>作用域插槽</h1>
    <my-scoped ref="myScopedChild" title="作用域插槽" @change="myScopedChange">
      <template #default="slotProps">我是默认插槽内容吗？是否可以正常显示{{ slotProps }}</template>
      <template #header="slotProps">
        {{ slotProps }}
      </template>
      <template #footer="slotProps">
        {{ slotProps }}
      </template>
    </my-scoped>
  </div>
  <div class="defineExpose">
    <h1>defineExpose</h1>
    <button @click="getChildFnAnCall">点击调用MyScoped组件暴露的函数</button>
  </div>
</template>
<script setup lang="ts">
import myTest2 from "../components/myTest2.vue";
import myNameComp from "../components/myNameComp.vue";
import myScoped from "../components/myScoped.vue";

// import { useTest } from '@/pinia/test';
// const store = useTest();
// // getters
// console.log('test getters', store.double);
// // state
// console.log('test state', store.$state.count);
// // actions
// console.log('test actions double', store.getDouble());
// console.log('test actions name', store.getName());


import { useIndex } from '@/pinia/index1';
const store = useIndex();
console.log('actions:', store.getObjProperty("address"));
console.log('getters:', store.val);


// provide
import { ref, reactive, provide } from "vue";

interface paramsType {
  readonly name: string,
  readonly age: number
}

const params = reactive<paramsType>({
  name: "苏普路",
  age: 12345,
})

const setProvide = <T extends paramsType>(object: T): void => {
  let keys: string[] = Object.keys(object);
  keys.forEach((key: string) => {
    // key as FooType 类型断言 假设   keyof 约束
    provide(key, ref(object[key as keyof typeof params]));
  })
}
setProvide(params);
const val = ref("苏普路")
const curDeynamicSlotName = ref("header");
// 切换动态插槽 示例；场景比如在多列表展示中实现列表风格不同（文本列表项，图片列表项，图文列表项，视频列表项）
function toggle() {
  curDeynamicSlotName.value === "footer"
    ? (curDeynamicSlotName.value = "header")
    : (curDeynamicSlotName.value = "footer");
}

function myScopedChange(e: Event, tar: HTMLElement): void {
  console.log(e, tar);
}

const myScopedChild = ref();
const getChildFnAnCall = () => {
  const sum = myScopedChild.value.addSum(1, 2);
  console.log(sum);
}
</script>

<style scoped>
.header-children {
  width: 100%;
  height: 100%;
}

.footer-children {
  width: 100%;
  height: 100%;
}
</style>
